<template>
    <div id="app">
        <div id="chart" style="width: 100%; height: 100%;"></div>
    </div>
</template>

<script>
import * as echarts from "echarts";

export default {
    name: "App",
    mounted() {
        const svgPath = process.env.BASE_URL + "data/asset/geo/ksia-ext-plan-min.svg";
        console.log('尝试加载SVG文件:', svgPath); // 添加日志来检查文件路径

        fetch(svgPath)
            .then((response) => {
                if (!response.ok) {
                    throw new Error(`HTTP error! status: ${response.status}`);
                }
                return response.text();
            })
            .then((svg) => {
                if (!svg || svg.trim() === '') {
                    throw new Error('SVG内容为空');
                }
                console.log('成功加载SVG内容:', svg.substring(0, 100)); // 打印SVG内容的前100个字符用于调试

                echarts.registerMap("ksia-ext-plan", { svg: svg });

                // 配置图表选项
                const option = {
                    tooltip: {},
                    geo: {
                        map: "ksia-ext-plan",
                        roam: true,
                        layoutCenter: ["50%", "50%"],
                        layoutSize: "100%",
                    },
                    series: [
                        {
                            name: "Route",
                            type: "lines",
                            coordinateSystem: "geo",
                            geoIndex: 0,
                            emphasis: {
                                label: {
                                    show: false,
                                },
                            },
                            polyline: true,
                            lineStyle: {
                                color: "#c46e54",
                                width: 0,
                            },
                            effect: {
                                show: true,
                                period: 8,
                                color: "#a10000",
                                trailLength: 0,
                                symbolSize: [12, 30],
                                symbol:
                                    "path://M87.1667 3.8333L80.5.5h-60l-6.6667 3.3333L.5 70.5v130l10 10h80l10 -10v-130zM15.5 190.5l15 -20h40l15 20zm75 -65l-15 5v35l15 15zm-80 0l15 5v35l-15 15zm65 0l15 -5v-40l-15 20zm-50 0l-15 -5v-40l15 20zm 65,-55 -15,25 c -15,-5 -35,-5 -50,0 l -15,-25 c 25,-15 55,-15 80,0 z",
                            },
                            z: 100,
                            data: [
                                {
                                    effect: {
                                        color: "#a10000",
                                        constantSpeed: 1,
                                        delay: 0,
                                    },
                                    coords: [
                                        [50.8751, 242.6628],
                                        [62.0369, 264.4824],
                                        [1.8078, 460.5935],
                                    ],
                                },
                                {
                                    effect: {
                                        color: "#00067d",
                                        constantSpeed: 80,
                                        delay: 0,
                                    },
                                    coords: [
                                        [50.8751, 242.6629],
                                        [62.037, 264.4824],
                                        [72.6336, 273.6278],
                                        [92.7829, 285.8691],
                                        [113.4364, 287.2185],
                                        [141.4479, 288.9295],
                                        [191.7169, 289.5507],
                                        [198.306, 294.0674],
                                        [204.997, 304.6029],
                                        [210.7918, 316.7373],
                                        [212.4518, 329.3657],
                                        [210.8885, 443.3925],
                                        [215.3594, 453.0063],
                                        [224.3876, 452.1509],
                                        [265.7149, 452.2018],
                                        [493.3409, 453.7753],
                                        [572.8893, 448.7799],
                                        [608.9514, 448.4337],
                                        [619.991, 450.8779],
                                        [624.248, 456.2194],
                                        [628.1434, 463.99],
                                        [629.8493, 476.0276],
                                        [631.275, 535.7322],
                                        [624.6757, 546.6496],
                                        [617.1802, 552.6481],
                                        [603.7269, 554.5067],
                                        [588.0179, 557.5518],
                                        [529.4386, 556.2991],
                                        [422.1995, 551.3853],
                                        [291.6692, 552.5768],
                                        [219.4279, 547.4949],
                                        [209.5391, 541.5932],
                                        [206.7079, 526.1948],
                                        [206.7079, 507.405],
                                        [206.1223, 468.7663],
                                        [204.4878, 459.4478],
                                        [197.5626, 452.8943],
                                        [170.32, 456.2755],
                                        [1.8079, 460.5935],
                                    ],
                                },
                            ],
                        },
                    ],
                };

                // 初始化 ECharts 实例并设置选项
                const chart = echarts.init(document.getElementById("chart"));
                chart.setOption(option);
            })
            .catch((error) => console.error("Error loading SVG:", error));
    },
};
</script>

<style>
#chart {
    width: 100%;
    height: 100vh;
}
</style>
